<template>
	<view>
	
		<view class="topTab">
			 <scroll-view  scroll-x="true" style="width:100%; background-color: #fff;" >
				 <view :style="'width:'+ ((tablist.length * 25)-10) +'vw; display: flex;'">
					 <view class="listLab" v-for="(item,index) in tablist" :key="item.type">					   
						<view class="curColor" v-if="curActive == item.type " :style="{color:mobile_head_color,borderColor:mobile_head_color}" @tap="changClick(index,item.type)">{{ item.text }}</view>
						<view @tap="changClick(index,item.type)" v-else >{{ item.text }}</view>
					 </view>
				 </view>
			 </scroll-view>
		 </view>
		 
		<view v-if="curActive == 'shop'" class="mgtop shop-list">
			 <view class="item border-b" v-for="(collect, index) in collectList" :key="collect.name + index">
			 	<form :report-submit="true" class="formidForm" @submit="goShop($event)" :data-index="index" data-list="shopList">
			 		<button formType="submit" class="formidBtn"></button>
			 	</form>
			 	<view class="close-mask" v-if="collect.is_close == 1"></view>
			 	<view class="avatar" style="width:85px;height:60px;">
			 		<image :src="collect.image" mode="aspectFill" :lazy-load="true"></image>
			 		<!-- <view class="num" :hidden="shop.is_close == 1 || !store_num[shop.store_id]">{{store_num[shop.store_id]}}</view> -->
			 		<view class="tag" v-if="collect.isverify == 1">
			 			<lang keywords="已认证"></lang>
			 		</view>
			 		<view class="close" v-if="collect.is_close == 1">
			 			<lang keywords="休息中"></lang>
			 		</view>
			 	</view>
			 
			 	<view class="info" style="margin-left:93px;">
			 		<view class="name-box"> 
			 			<text class="name">{{collect.name}}</text>
			 		</view>
			 		<view class="line">
			 			<view class="score-box">
			 				<block v-if="collect.is_self == 1">
			 					<lang class="self-support" keywords="自营"></lang>
			 				</block>
			 				<text class="iconfont icon-star"></text>
			 				<text class="score">{{collect.star}}</text>
			 				<block v-if="collect.is_new == 1 || collect.month_sale_count > 0">
			 					<block v-if="collect.is_new == 1">
			 						<lang keywords="新店入驻"></lang>
			 					</block>
			 					<block v-else>
			 						<lang keywords="已售X1" :X1="collect.month_sale_count"></lang>
			 					</block>
			 				</block>
			 			</view>
			 			<view class="express-box">
			 				<text class="other" :style="'background:' + mobile_head_color + ';'" v-if="collect.deliver_type == 0 || collect.deliver_type == 3">{{collect.deliver_name}}</text>
			 				<block v-if="collect.delivery && (collect.deliver_type == 1 || collect.deliver_type == 4 )">
			 					<lang class="self" :style="'color:' + mobile_head_color + ';border:1rpx solid ' + mobile_head_color + ';'"
			 					 keywords="商家配送"></lang>
			 				</block>
			 				<block v-if="collect.delivery && (collect.deliver_type == 5 )">
			 					<lang class="self" :style="'color:' + mobile_head_color + ';border:1rpx solid ' + mobile_head_color + ';'"
			 					 keywords="快递配送"></lang>
			 				</block>
			 			</view>
			 		</view>
			 		<view class="line pt5 po-re" v-if="collect.deliver_type != 2">
			 			<view class="gather-box">
			 				<lang keywords="起送" :right="true"></lang>
			 				{{currency + collect.delivery_price}}</text>
			 				<block v-if="config.config.shop_show_delivermoney">
			 					<text class="iconfont icon-line"></text>
			 					<lang keywords="配送" :right="true"></lang>
			 					<text>{{currency + collect.delivery_money}}</text>
			 				</block> 
			 			</view>
			 			<view class="gather-box">
			 				<text v-if="collect.deliver_type != 2">{{collect.delivery_time + collect.delivery_time_type}}</text>
			 				<text class="iconfont icon-line" v-if="collect.deliver_type != 2"></text>
			 				<text>{{collect.range}}</text>
			 			</view>
			 		</view>
			  
			 		<view class="discount-icon">
			 			<view class="self" :style="'border-color:' + mobile_head_color + ';color:' + mobile_head_color + ';'" v-if="collect.deliver_type == 2 || collect.deliver_type == 3 || collect.deliver_type == 4">
			 				<lang keywords="门店自提"></lang>
			 			</view>
			 			<view :class="item.type" v-for="(item, index2) in collect.coupon_list" :key="index2">{{item.text}}</view>
			 		</view>
			 
			 	</view>
			 
			 </view>
			 					
		</view>
		<view v-if="curActive == 'group'" class="mgtop">
			 <view class="dealcard" v-for="(item,index) in collectList" :key="item.mer_id"  @tap="goUrl($event)" :data-url="item.url" >
				<view class="dealcardBlock" >
					<view class="dealcard-img imgbox" style="width:76px;height:76px;">
						<img :src="item.image" alt=" " style="margin-left:0px;">
					</view>
					<view class="dealcard-block-right">
						<view class="brand">{{ item.merchant_name }}</view>
						<view class="title" style="padding-left:0;">{{ item.group_name }}</view>
						<!--  -->
						<view class="price">
							<view class="price-left">
								<view :style="'color:' + mobile_head_color + ';'" >{{ currency + item.price }}</view><view class="strong-color"></view><view class="line_m" style="margin-left:6px;">{{ currency + item.old_price }}</view>  
							</view>  
						</view>
						<view class="tip_div">
							 <view class="tip-info"   v-for="(itemD,indexX) in item.field_info" :key="indexX"><view class="line-tip" :style="'border-color:' + mobile_head_color + ';color:' + mobile_head_color + ';'">{{ itemD }}</view> </view>
						 </view>	
					</view>
				</view>  
			</view>
		</view>
		<view v-if="curActive == 'foodshop'" class="mgtop navBox_list">
         <view class="navBox_listBlock" v-for="(item,index) in collectList" :key="item.store_id" >
           <view class="navBox_listBlockD" @tap="goUrl($event)" :data-url="item.url"> 
            <view class="img_box"><img :src="item.image"></view> 
            <view class="navLtop clr">  
			 <view class="fl">
				 <text class="new-store" v-if="item.is_new == 1">新店</text> {{ item.name }}
			 </view>
             <view class="navLtop_right fr"> 
              <view class="ln" v-if="item.is_book == 1">订</view> 
              <view class="zi" v-if="item.is_queue == 1">排</view> 
			  <view class="lv" v-if="item.is_takeout == 1">外</view>
             </view> 
            </view> 
            <view class="navLBt clr"> 
             <view class="navLBt_ul fl show_number clr"> 
                <view class="star">   
				      <view v-for="count in parseInt(item.score_mean)" class="full"></view>
					  <view v-if="5-item.score_mean >0" class="helf"></view>
					  <view v-for="item in (5-parseInt(item.score_mean))" ></view> 
				</view> 
             </view> 
             <view class="distance fr" v-if="item.range != 0"> {{ item.range}} </view>  
            </view> 
			
			<view class="" style="border: 1px solid #a01615;color: #a01615;font-size: 12px;padding-left: 10px;padding-right: 10px;" v-if="item.mer_discount > 0">{{ item.mer_discount }}折优惠</view> 
            <view class="navLBt clr" v-if="item.sys_discount > 0"><view style="border: 1px solid #a01615;color: #a01615;font-size: 12px;padding-left: 10px;padding-right: 10px;">{{ item.sys_discount }}折优惠</view></view>
	  
           </view> 
           <view class="navlink clr" v-if="item.pay_in_store && item.discount_txt !=''"> 
            <navigator   @tap="goUrl($event)" :data-url="item.store_pay">  
			  <view class="link_Pay fl">到店付</view> 
			  <view class="fl" v-if="item.discount_txt.discount_type == 1">{{ item.discount_txt.discount_percent }}折</view> 
              <view class="fl" v-else>
				 每满{{ item.discount_txt.condition_price }}减{{ item.discount_txt.minus_price + item.Currency_txt }} 
			  </view>
			  <view class="clear"></view>
			</navigator> 
           </view>  
          </view> 
		</view>
		<view v-if="curActive == 'appoint'" class="mgtop yuyue"> 
			<navigator class="box" v-for="(item,index) in collectList " @tap="goUrl($event,item.appoint_id)" :data-url="item.url">
			  <view class="imgBox"><img :src="item.list_pic" :style=" 'height:' + windowWidth/2/9*5+'px'" /> 
			  </view> 
			  <view class="yuyueBT">
				 <view class="catName"> {{ item.appoint_name }} </view>
				 <view class="catPrice">  
					   <view class="fl" v-if="item.is_appoint_price == 0">面议</view> 
					   <view class="fl" v-else>{{ item.appoint_price}}
					     <text v-if="item.extra_pay_price >0 ">+{{ item.extra_pay_price + item.extra_price_alias_name }} }</text>
					   </view>
					   
					   <view class="fr">
						   <text v-if="item.juli && item.lat!=null">{{ item.juli }}</text>
						   <text v-else>已预订{{ item.appoint_sum }}人 </text> 
					   </view> 
					    
					   <view class="clear"></view>
				  </view>  
				  <view class="catName" v-if="item.appoint_type == 0">
					  <image src="../../static/images/daodian.png" style="width:50px;height:20px;"></image>
					  <!-- <image src="../../static/images/daodian.png" width="50px" height="20px" /> -->
				  </view> 
				  <view class="catName" v-else>
					  <image src="../../static/images/shangmen.png" style="width:50px;height:20px;"></image>
				  </view> 
			   
			  </view>
			</navigator>
			 
		</view>
		<view v-if="curActive == 'mall'" class="mgtop mallCollect">
			<view class="mallCollectTil" v-if="collectList.goodsList && collectList.goodsList.length>0">收藏商品</view> 
			<view class="goods_List goods_box">
			   <view v-for="(item, index) in collectList.goodsList" :key="index" 
				class="goods_block goods_blockWater" @tap="goUrl($event)" :data-url="item.url">
				   <view class="goods_Img">
					<image :src="item.image" lazy-load="true" style="width:76px;height:76px;"></image> 
				   </view> 
				   <view class="goods_txtBox"> 
					   <view class="goods_txt">
						<view class="goods_name">{{ item.name }} </view> 
						<view class="goods_kd" v-if="item.freight_value>0">	运费 {{  currency+item.freight_value }}  </view>
						<view class="goods_kd" v-else>包邮 </view>
						<view class="goods_price">
							<view class="goods_pricepd" :style="'color:' + mobile_head_color + ';'" >  <text>{{ currency+item.price }}</text></view>
							<view class="goods_priceNum">{{ item.sell_count }}人付款</view> 
						</view> 
					   </view>
				   </view> 
				</view>  			
			 </view> 
			 
			 <view class="mallCollectTil" v-if="collectList.storeList && collectList.storeList.length>0">收藏店铺</view>
			 <view class="goods_List goods_box">
			    <view v-for="(item, index) in collectList.storeList" :key="index" 
			 	class="goods_block goods_blockWater" @tap="goUrl($event)" :data-url="item.url">
			 	   <view class="goods_Img">
			 		<image :src="item.image" lazy-load="true" style="width:76px;height:76px;"></image> 
			 	   </view> 
			 	   <view class="goods_txtBox"> 
			 		   <view class="goods_txt">
			 			<view class="goods_name">{{ item.name }} </view>  
			 			<view class="store_txt">
			 				<view class="">综合评分<label :style="'color:' + mobile_head_color + ';'" >{{ item.score_mean }}</label></view>
			 				<view class="">共{{ item.goods_count }} 件商品</view> 
			 			</view> 
			 		   </view>
			 	   </view> 
			 	</view>  			
			  </view>  
		</view>
		
		<!-- 没有数据 -->
		<view v-if="!is_loading && (collectList&&collectList.length == 0) || (collectList.storeList && collectList.goodsList)" class="noCollect" >
			<image src="../../static/images/no_collect.png" style="width: 128px; height: 128px;"></image>
			<view>暂无收藏信息</view>
		</view>
		
		
	</view> 
</template>

<script>
	import common from '../../utils/common.js' 
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
	var app = getApp(); 
	var _this;
	export default{
		data(){
			return{ 
				tablist:[],
				curActive: '',
				currency: '¥',
				windowWidth:windowWidth,
				mobile_head_color:'', 
				collectList:[],
				is_loading: true
			}
		},
		onLoad(e){  
			_this = this  
			if(e.type){
				_this.curActive = e.type
			}
			
			common.setMainColor(_this, data => {
			 	_this.mobile_head_color = data.config.mobile_head_color
			 	console.log('data.config.mobile_head_color', data.config.mobile_head_color); 
				
				common.post('My&a=my_collect_type', {}, data=>{
					console.log(data)
					_this.tablist = data 
					if(_this.curActive == '' && data[0] && data[0].type){
						_this.curActive = data[0].type
					}
					_this.initData(_this.curActive)
				}); 
				
			}); 
		},
		methods:{
			changClick(index,option){ 
			   this.curActive = option
			   this.collectList = [];
			   this.initData(option)
			},
			initData(option){
				_this.is_loading = true;
				common.post('My&a=my_collect', {noTip: true,type:option}, data=>{
					console.log(data)
					_this.collectList = data 
					_this.is_loading = false;
				}); 
			},
			// 跳转到对应的URL地址
			goUrl(e,appoint_id=0) {
				
				const _appointUrl = '/wap.php?g=Wap&c=Appoint&a=detail&appoint_id='
			
				if (e.type == 'submit') {
					common.upFormid(e);
				}
			
				var pageTitle = e.currentTarget.dataset.url_title; 
				if (!pageTitle) {
					pageTitle = '';
				}
			
				if(e.currentTarget.dataset.url.indexOf('Appoint')==-1){
					common.parseUrl(e.currentTarget.dataset.url, 'shop', false, pageTitle);
				}else {
					common.parseUrl(_appointUrl + appoint_id, 'shop', false, pageTitle);
					
				}
				
			},
			
			// 跳转面
			goNativeUrl(e) {
				wx.navigateTo({
					url: e.currentTarget.dataset.url
				});
			},
			
			// 跳转到对应的店铺
			goShop(e) {  
				console.log(e); 
				if (e.type == 'submit') {
					common.upFormid(e);
				} 
				var index = e.currentTarget.dataset.index;
				var list = e.currentTarget.dataset.list;
			
				if (list === 'adInfo') {
					list = _this.adInfo.preference_shop_list;
				} else {
					list = _this.collectList;
				}
				console.log('跳转店铺详情页')
				wx.navigateTo({
					url: '/pages/shop_new/shopDetail/shopDetail?store_id=' + list[index].store_id + '&backgroundColor=' + list[index]
						.shop_fitment_color + '&frontColor=' + list[index].shop_fitment_front_color
				});
			},
		},
	
	}
</script>

<style>
	.noCollect{
		padding: 50px 0;
		text-align: center;
		color: #666;
	}
	.new-store{
		font-size: 12px;
		background-color: #29c7a2;
		color: white;
		margin-right: 5px;
		padding: 2px;
	}
	/* 商城 */
	 .mallCollectTil{
		 font-size: 16px;
		 padding: 10px;
		 background: #fff;
		 border-bottom: 1px solid #eee;
	 }
	.goods_box .goods_blockWater{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-items:flex-start; 
		margin-bottom: 10px;
		box-sizing: border-box; 
		border-radius: 5px;
		background: #FFF;
		padding: 10px;
	} 
	
	.goods_box .goods_txt .goods_kd,.goods_box .goods_txt .goods_priceNum{
		color:#999;
		font-size:11px
	}
	.goods_box .goods_txt .goods_price{
		padding-right: 10px;
		color: #ff5700; 
		font-size: 12px; 
		display:flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items:center
	}
	 
	.goods_box .goods_txt .goods_pricepd{
		font-size: 18px;
		margin-right: 10px;
	}
	.goods_box .goods_blockWater .goods_kd{
		display: inline-block;
	}
	.goods_box .goods_blockWater .goods_Img image{
		width: 160px;
		height: 160px; 
		padding: 0;
		margin: 0;
		display: block;
	}
	.goods_box .goods_blockWater .goods_txtBox{
		padding:0 10px; 
		width: 100%;
	}
	
	.goods_box .goods_blockWater .goods_name{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 10px;
	}
	
	.store_txt{
		display: flex;
		flex-direction: row;
		flex-wrap:nowrap;
		justify-content:space-between;
		align-items:center;
		margin-top: 10px;
		padding-top: 20px;
		color: #999;
		font-size: 15px;
	}
	
	.goods_box .goods_blockList{
		 position: absolute;
		 left: 10upx;
		 width: calc(50% - 20upx);
		 border: 1upx solid #f9f9f9;
		 background: #fff;
		 border-radius: 5px;
	}
	.yuyue{
		padding: 10px 5px;
	}
	.yuyue .box{
		width: 50%;
	    display: inline-block;
		padding: 0 5px;
		box-sizing: border-box;
		 
	}
	.yuyue .box .yuyueBT{
		background: #FFF;
		color: #999;
		font-size: 12px;
		line-height: 21px;
	} 
	.yuyue .box .yuyueBT .catName,.yuyue .box .yuyueBT .catPrice .fl{
		color: #333;
	}
	.yuyue .box .imgBox{
		width: 100%;
		height: 110px;
		text-align: center;  
	}
	.yuyue .box .imgBox img{
		width: 100%;
	}
	.clear{
		clear: both;
	}
	.border-t {
		position: relative;
	}
	
	.border-b::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1rpx;
		width: 100%;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}
	
	.border-t::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 1rpx;
		width: 100%;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}
	.mgtop{
		margin-top: 10px;
	}
	.topTab{
		border-bottom: 1px solid #eee;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content:space-around;
		align-items:center;
		background: #fff; 
	}
	.topTab .listLab{
		margin-left:5vw;
		width:20vw;
		line-height: 50px;
		text-align: center;
	}
	
	.topTab .listLab:first-child {
		margin-left:0;
	}
	
	.topTab	.curColor{
		color:#06c1ae;
		border-bottom: 2px solid #06c1ae;
	}
	.shop-list{ 
		background: #fff;
	}
	.shop-list .item {
		margin-left: 10px;
		padding: 15px 10px 10px 0;
		position: relative;
		min-height: 70px;
	}
	
	.shop-list .item .close-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, .5);
		z-index: 5;
	}
	.discount-icon {
		display: flex;
		flex-wrap: wrap;
		padding-top: 8px;
	}
	
	.discount-icon>view {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
	}
	/* 发票 */
	.invoice {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}
	
	/* 平台首单优惠 平台优惠 */
	.system_newuser,
	.system_minus {
		color: #aa8023;
		border: 1rpx solid #f3e5c6;
	}
	
	.shop-list .item .info .discount-icon .self {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}
	
	.shop-list .item .info .discount-icon .self-support {
		background: #ff3e4a;
		color: #fff;
	}
	
	.delivery, .discount, .isdiscountgoods, .isdiscountsort, .minus, .newuser {
	    color: #ff3e4a;
	    border: 0.5px solid #fce5e7;
	 }
	 
	
	.shop-list .item:last-child.border-b::after {
		height: 0;
	}
	
	.shop-list .item .avatar {
		position: relative;
		float: left;
		margin-right: 8px;
		margin-top: 3px;
	}
	
	.shop-list .item .avatar .tag {
		position: absolute;
		top: 0;
		right: 0;
		background: #ffce59;
		color: #aa8023;
		font-size: 10px;
		padding: 0 2px;
		font-weight: bold;
	}
	
	.shop-list .item .avatar .num {
		position: absolute;
		bottom: -3px;
		right: -3px;
		background: #ff1940;
		width: 18px;
		height: 18px;
		color: #fff;
		text-align: center;
		line-height: 18px;
		border-radius: 50%;
		font-size: 14px;
	}
	
	.shop-list .item .avatar image {
		height: 100%;
		width: 100%;
		display: block;
		border-radius: 2px;
	}
	
	.shop-list .item .avatar .close {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(252, 251, 251, 0.8);
		color: #555;
		text-align: center;
		font-size: 13px
	}
	
	.shop-list .item .info {
		margin-left: 87px;
		box-sizing: border-box;
	}
	
	.shop-list .item .info .name-box {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding-bottom: 3px;
	}
	
	.shop-list .item .info .self-support {
		font-size: 11px;
		color: #fff;
		background: #fc3e2d;
		padding: 0 4px;
		border-radius: 2px;
		margin-right: 5px;
		white-space: nowrap;
		vertical-align: middle;
		display: inline-block;
		margin-top: -3px;
		line-height: 1.6;
	}
	
	.shop-list .item .info .name {
		font-weight: bold;
	}
	
	.shop-list .item .info .line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
	}
	
	.shop-list .item .info .text-overflow {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.shop-list .item .info .line .tag {
		white-space: nowrap;
	}
	
	.shop-list .item .info .line .score-box {
		display: flex;
		align-items: center;
		line-height: 20px;
	}
	
	.shop-list .item .info .line .score-box .icon-star {
		color: #ffc900;
		font-size: 12px;
		margin-right: 5px;
	}
	
	.shop-list .item .info .line .score {
		color: #333;
		margin-right: 10px;
	}
	
	.shop-list .item .info .line .score-box wux-rater {
		margin-bottom: 2px;
		white-space: nowrap;
	}
	
	.shop-list .item .info .line .gather-box {
		float: right;
	}
	
	.shop-list .item .info .line .gather-box .gap {
		margin: 0 4px;
		color: #ddd;
	}
	
	.shop-list .item .info .line .icon-line {
		font-size: 14px;
	}
	
	.shop-list .item .info .line .express-box text {
		margin-left: 5px;
		font-size: 11px;
		padding: 3px;
		border-radius: 2px;
	}
	
	.shop-list .item .info .line .express-box .other {
		background: #06c1ae;
		color: #fff;
		padding: 2px 3px;
	}
	
	.shop-list .item .info .line .express-box .self {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
		margin-left: 5px;
	}
	
	.shop-list .item .info .line .express-box .self text {
		margin-left: 0;
	}
	
	.shop-list .item .info .line .tag {
		border-radius: 2px;
		margin-right: 5px;
		padding: 0 2px;
	}
	
	.shop-list .item .info .sale-box .iconfont {
		padding: 0 5px;
	}
	.dealcard{
		background: #fff;
		padding: 10px;
	}
	.dealcard .dealcardBlock {
		background-color: white;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #f1f1f1;
		padding: 10px 3px;
	
	}
	.dealcard .dealcardBlock:last-child{
		margin-bottom:0px;
	}
	.dealcard .dealcard-img {
		width: 85px;
		height: 80px;
		border-radius: 2px;
		float: left;
		position: absolute;
		overflow:hidden;
	}
	.dealcard .dealcard-img img {
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}
	.dealcard .dealcard-img .closeTip{
		position: absolute;
		top: 40px;
		width: 100%;
		color: white;
		background: black;
		text-align: center;
	}
	.dealcard .dealcard-block-right {
		margin-left: 95px;
		min-height: 60px;
	}
	.dealcard .brand {
		font-size: 16px;
		line-height: 26px;
		color: #333;
		padding-right: 70px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dealcard .location-right{
		position: absolute;
		top: 8px;
		right: 2px;
		color:#666;
		font-size: 11px;
	}
	.dealcard  .title{
		padding-left:74px;
	}
	.dealcard  .title .star{
		vertical-align: middle;
		margin-left: 2px;
		position: absolute;
		left: 0px;
		top: 4px;
	}
	 
	.dealcard  .title .sold{
		position: relative;
		top: 2px;
	}
	
	.dealcard  .title .location-right{
		top:1px;
	}
	.dealcard  .price .location-right,.dealcard  .title.pick .location-right{
		background: #06c1ae;
		color: white;
		padding: 0px 2px;
		border-radius: 2px;
		font-size: 11px;
		top: 0px;
		padding: 0 4px;
		font-style: normal;
	}
	.line_m{text-decoration:line-through;display: inline;color: #ccc}
	.tip_div {
		max-height: 56px;
		overflow: hidden;
	}
	.line-tip {
		color: #06c1ae;
		border: #06c1ae 1px solid;
		display: inline-block;
		border-radius: 5px;
		padding: 1px 3px;
		font-size: 10px;
	}
	.tip_div .tip-info {
		font-size: 10px;
		display: inline-block;
		margin-right: 5px;
		margin-top: 5px;
	}
	
	.location-right .pick{
		border: 1px solid #06c1ae;
		padding: 0 1px;
		border-radius: 2px;
	}
	
	.dealcard .title,.dealcard .price{
		position:relative;
		
	}
	.dealcard .price{
		display: flex;
		flex-direction: row;
		justify-content:space-between
	}
	.dealcard .title {
	    color: #999;
	    height: 18px;
	    line-height: 16px;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    font-size: 12px;
	    margin-bottom: 8px;
	    letter-spacing: 1px;
	}
	.dealcard .title.pick{
		margin-top:14px;
	}
	.dealcard .title span,.dealcard .price span{
		color:#666;
		font-size: 11px;
	}
	.dealcard .price span.delivery{
		border-left: 1px solid #bbb;
		padding-left: 8px;
		margin-left: 8px;
	}
	.dealcard .coupon {
		color:#bbb;
		font-size:11px;
		margin-top: 5px;
		padding-top: 5px;
		border-top: 1px solid #f1f1f1;
		overflow: hidden;
	}
	.dealcard .coupon.hasMore{
		height: 44px;
	}
	.dealcard .coupon .more{
		position: absolute;
		bottom: 11px;
		right: 2px;
		padding-right: 12px;
	}
	.dealcard .coupon .more:after{
		display: inline-block;
		content: "";
		border-bottom: 1px solid #bbb;
		border-left: 1px solid #bbb;
		width: 4px;
		height: 4px;
		-webkit-transform: rotate(315deg);
		background-color: transparent;
		position: absolute;
		top: 5px;
		right: 4px;
	}
	.dealcard .coupon.showMore .more:after{
		border-top: 1px solid #999;
		border-right: 1px solid #999;
		border-bottom:none;
		border-left:none;
		top:8px;
	}
	.dealcard .coupon.showMore{
		height:auto;
	}
	.dealcard .coupon ul{
	
	}
	.dealcard .coupon li{
		position: relative;
		padding-left: 20px;
		line-height: 22px;
		padding-right: 60px;
		height: 22px;
		overflow: hidden;
	
		word-break:keep-all;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.dealcard .coupon.showMore li{
		height:auto;
		word-break: inherit;
		white-space: inherit;
	}
	.dealcard .coupon li em{
		width: 16px;
		height: 16px;
		line-height: 16px;
		display: inline-block;
		background-color: red;
		position: absolute;
		left: 0;
		top: 3px;
		border-radius: 2px;
	}
	.dealcard .coupon li em:before{
		content:'惠';
		font-size:11px;
		color:white;
		margin-left: 2px;
	}
	.price-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.price .line-right{
		color: #999;
		height: 18px;
		line-height: 16px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 12px;
		margin-bottom: 8px;
		letter-spacing: 1px;
	}
	
	/* 餐饮 */
	.navBox_list{overflow-y:auto}
	.navBox_list .navBox_listBlock{  background-color: #fff; /*border-top: #eeeeee 1px solid;*/border-bottom: #eeeeee 1px solid; margin-bottom: 8px; }
	.navBox_list .navBox_listBlockD{ padding: 0 10px 0 15px; border-bottom: #f1f1f1 1px solid; position: relative; }
	.navBox_list .navBox_listBlockD .logo_img{ width: 70px; height: 42px; position: absolute; left: 15px; top:15px}
	.navBox_list .navBox_listBlockD .logo_img img{ width: 70px; height:42px; border-radius: 6px; }
	.navBox_list .navBox_listBlockD .navLtop {  height: 20px;  padding: 14px 0 12px 0;}
	.navBox_list .navBox_listBlockD h2{ font-size: 17px; font-weight: normal; line-height: 22px; }
	.navBox_list .navBox_listBlockD .navLtop_right view{ display: inline-block; font-size: 12px; color: #fff; width: 17px; height: 17px; border-radius: 3px; text-align: center; line-height: 17px; margin-left: 5px; }
	.navBox_list .navBox_listBlockD .navLtop_right .ln{ background-color: #00cccc; }
	.navBox_list .navBox_listBlockD .navLtop_right .zi{ background-color: #9933cc; }
	.navBox_list .navBox_listBlockD .navLtop_right .lv{ background-color: #29c7a2; }  
	.navBox_list .navBox_listBlockD .navLBt{ height: 18px;  line-height: 18px; padding-bottom: 12px; }  
	.navBox_list .navBox_listBlockD .navLBt .distance{ color: #666666; } 
	.navBox_list .navlink{ border-bottom: #f1f1f1 1px solid; line-height: 41px;  color: #666666;padding: 0 10px 0 15px; }
	.navBox_list .navlink navigator{ display: block; }
	.navBox_list .navlink .link_Pay{  height: 22px; display: inline-block;  border: #29c7a2 1px solid; border-radius: 100px; line-height: 22px; font-size: 16px; color: #29c7a2; background: url(../../static/images/cyt_17.png) 10px 5px no-repeat; padding: 0 8px; padding-left: 25px; background-size: 13px; margin: 9px 10px 0 0; }
	.navBox_list .navlink .quick_Pay{  height: 22px; display: inline-block;  border: #29c7a2 1px solid; border-radius: 100px; line-height: 22px; font-size: 16px; color: #29c7a2; background: url(../../static/images/cyt_18.png) 10px 5px no-repeat; padding: 0 8px; padding-left: 25px; background-size: 13px; }
	.navBox_list .navlink .link_jt{ display: inline-block; width: 5px; height: 40px;  background: url(../../static/images/sylj_03.png) left center no-repeat;  background-size: 5px; }
	 
	.navBox_list .navBox_listBlock .Menulink:last-child{ border-bottom: none; }
	.navBox_list .Menulink{ padding: 13px 0 13px 0px; border-bottom: #f1f1f1 1px solid;  margin-left: 15px; }
	.navBox_list .Menulink .Menulink_img{ width: 80px; height: 63px; float: left; position: relative; }
	.navBox_list .Menulink .Menulink_img img{ width: 80px; height: 63px;  }
	.navBox_list .Menulink .Menulink_img .MenuGroup{background: url(../../static/images/cyt_21.png) left center no-repeat; background-size: 37px ; position: absolute;  display: block; width: 37px; height: 37px; top: 0px; left: 0px;}
	.navBox_list .Menulink .Menulink_img .PinGroup{background: url(../../static/images/pin.png) left center no-repeat; background-size: 37px ; position: absolute;  display: block; width: 37px; height: 37px; top: 0px; left: 0px;}
	.navBox_list .Menulink .Menulink_right{ padding-left: 90px;  padding-right: 10px; position: relative;}
	.navBox_list .Menulink .Menulink_right h2{ font-weight: normal; font-size: 16px; padding-top: 5px; height: 20px; line-height: 20px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;   }
	.navBox_list .Menulink .MenuPrice { line-height: 24px; height: 24px; padding-top: 13px; color: #666666; }
	.navBox_list .Menulink .MenuPrice view{ display: inline-block; }
	.navBox_list .Menulink .MenuPrice .PriceF{ color: #f24b49; }
	.navBox_list .Menulink .MenuPrice .PriceF em,.navBox_list dd.Menulink .MenuPrice .PriceF i{ font-style: normal; }
	.navBox_list .Menulink .MenuPrice .PriceF em{ font-size: 20px; }
	.navBox_list .Menulink .MenuPrice .PriceF i{font-size: 13px;}
	.navBox_list .Menulink .MenuPrice .PriceS{ position: absolute; right: 10px; bottom: 0px; height: 22px;}
	.MenuPrice .tag{
		display: inline-block;
		margin-left: 3px;
		border: 1px solid #f58300;
		color: #f58300;
		padding: 1px 3px;
		border-radius: 2px;
		font-size: 12px;
		line-height: 12px;
	}
	.navBox_list .img_box{
		width:56px;
		height:56px;
		border-radius: 28px;
		float: left;
		overflow:auto;
		margin:10px 10px 1px 0;
	}
	.navBox_list .img_box img{
		width:100%;
		height:100%;
		display: block;
		object-fit:cover;
	}
	.navBox_list dl.on .img_box img{
		/*-webkit-filter: grayscale(100%);
	    filter: grayscale(100%);*/
	    opacity: 0.6;
	}
	.navBox_list dt .navLtop .fl{
		width: 65%;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	
	.star view{
		width: 12px;
		height: 12px;
		display: inline-block;
		background: url(../../static/images/none_star.png) no-repeat;
		background-size: 100%;
		margin-right: 2px;
	}
	.star .full {
	    background-image: url(../../static/images/full_star.png); 
	} 
	.star .half {
	    background-image: url(../../static/images/mid_star.png);
	}

 
</style>
